<template id="dashboard-numSquare">
    <div>
        <v-row class="pt-2">
            <v-col class="headline" cols="12">运营状况</v-col>
        </v-row>
        <v-row>
            <v-col cols="auto" v-for="(item,index) in  operatingConditions[0]" :key="index" class="mr-2">
                <v-card flat width="145px" :href="item.href">
                    <v-card-text class="pb-1">
                        {{item.title}}
                    </v-card-text>
                    <v-card-text class="black--text text--lighten-1 display-1 pa-1 pl-4">
                        {{item.value}}
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
        <v-row>
            <v-col class="headline" cols="12">风险状况</v-col>
        </v-row>
        <v-row>
            <v-col cols="auto" v-for="(item,index) in riskSituation[0]" :key="index" class="mr-2">
                <v-card class="pb-1" flat width="145px">
                    <v-card-text>
                        {{item.title}}
                    </v-card-text>
                    <v-card-text class="black--text text--lighten-1 display-1 pa-1 pl-4">
                        {{item.value}}
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </div>
</template>

<script type="module">
    Vue.component("dashboard-numSquare", {
        template: "#dashboard-numSquare",
        props: {},
        data: () => ({
            // violationCar: '',
            // needRenewalInsurance: '',
            // overdueCustomers: '',
            // allCarNumber: '',
            // requiredInspectCar: '',
            // underRepairCar: '',
            // leaseCar: '',
            // unLeaseCar: '',
            // allCustomer: '',
            // leaseCustomer: '',
            operatingConditions: [
                {
                    allCarNumber: {
                        title: '全部车辆',
                        value: '',
                        href: ``
                    },
                    leaseCar: {
                        title: '已租车辆',
                        value: '',
                        href: ''
                    },
                    unLeaseCar: {
                        title: '未租车辆',
                        value: '',
                        href: ''
                    },
                    allCustomer: {
                        title: '全部客户',
                        value: '',
                        href: ''
                    },
                    leaseCustomer: {
                        title: '已租客户',
                        value: '',
                        href: ''
                    }
                }
            ],
            riskSituation: [
                {
                    underRepairCar: {
                        title: '在修车辆',
                        value: '1',
                        href: ''
                    },
                    violationCar: {
                        title: '违章车辆',
                        value: '10000',
                        href: ''
                    },
                    needRenewalInsurance: {
                        title: '需续保车辆',
                        value: '5000',
                        href: ''
                    },
                    requiredInspectCar: {
                        title: '需年检车辆',
                        value: '5000',
                        href: ''
                    },
                    overdueCustomers: {
                        title: '逾期客户',
                        value: '3',
                        href: ''
                    },
                }
            ]
        }),
        computed: {},
        watch: {},
        async created() {
        },
        async mounted() {
        },
        methods: {
            async doUiAction(uiActionId, uiActionData) {
                switch (uiActionId) {
                    case 'getNumberSquareData':
                        await this.getNumberSquareData(uiActionData);
                        break;
                    default:
                        console.error("[doUiAction] uiActionId not find", { uiActionId });
                        break;
                }
            },
            async getNumberSquareData(data) {
                // 运营情况
                this.operatingConditions[0].allCarNumber.value = data.allCarNumber
                this.operatingConditions[0].leaseCar.value = data.leaseCar
                this.operatingConditions[0].unLeaseCar.value = data.unLeaseCar
                this.operatingConditions[0].allCustomer.value = data.allCustomer
                this.operatingConditions[0].leaseCustomer.value = data.leaseCustomer
                // 风险状况
                this.riskSituation[0].underRepairCar.value = data.underRepairCar
                this.riskSituation[0].violationCar.value = data.violationCar
                this.riskSituation[0].needRenewalInsurance.value = data.needRenewalInsurance
                this.riskSituation[0].requiredInspectCar.value = data.requiredInspectCar
                this.riskSituation[0].overdueCustomers.value = data.overdueCustomers
            }
        },
    });
</script>